<template>
  <wrap title="资金授权">
    <div slot="page">
      <div class="info-box light-bg flex flex-justify-center flex-align-center text-center">
        <div class="info flex flex-row flex-col font-15"><img :src="userInfo.avatar" class="avatar">{{userInfo.name}}</div>
        <i class="fa fa-exchange fa-2x grey"></i>
        <div class="info flex flex-row flex-col font-15"><img src='../../assets/images/app-avatar.png' class="avatar">九机白条</div>
      </div>
      <div class="fill-box light-bg">
        <div class="fill-item border-bottom border-top flex flex-justify-between flex-align-center">
          <span class="font-15 label">订单信息</span>
          <span class="font-15 fill-data content" v-if="authInfo.order">{{authInfo.order}}</span> 
        </div>
        <div class="fill-item border-bottom flex flex-justify-between flex-align-center">
          <span class="font-15 label">授权金额</span>
          <span class="font-15 fill-data content" v-if="authInfo.amount">{{authInfo.amount}}</span> 
        </div>
      </div>
      <div class="agreement">
        <label class="checkbox"  @click="agree=!agree" >
          <i class="fa fa-lg" :class="[agree?'fa-check-square-o':'fa-square-o']" aria-hidden="true"></i>
        </label>
        <router-link to="/auth/protocol">
          <span class="agree">《九机白条额度授权冻结协议》</span>
        </router-link>
      </div>
       <a href="javascript:;" :class="['next-btn',nextEnable?'red-bg':'grey-9-bg','font-16']" @click="next()">确认授权</a>
      <keyboard v-if="showPassword" type="password" :number="6" placeholder=' ' desc="您正在更改重要信息，输入九机密码支付进行安全验证" @submit="checkPayPwd" @close="close"  @forget="forgetPassword"></keyboard>
    </div>
  </wrap>
</template>
<script>
  import wrap from '../../components/wrap.vue'
  import keyboard from '../../components/keyboard.vue'
  export default {
    components: {wrap, keyboard},
    data () {
      return {
        nextEnable: false,
        userInfo: {
          avatar: 'https://img2.ch999img.com//images/usericon.png',
          name: '用户名'
        },
        authInfo: {
          order: '',
          subId: '',
          amount: 0
        },
        agree: true,
        showPassword: false,
        authorizeOrderId: 0,
        checkUrl: '',
        apiType: 1
      }
    },
    created () {
      const self = this
      self.authInfo.order = self.$route.query.order ? self.$route.query.order : ''
      self.authInfo.subId = self.$route.query.subId ? self.$route.query.subId : ''
      self.authInfo.amount = self.$route.query.amount ? self.$route.query.amount : 0
      self.checkUrl = self.$route.query.checkUrl ? self.$route.query.checkUrl : ''
      self.apiType = self.$route.query.apiType ? self.$route.query.apiType : '1'
      if (self.checkUrl) {
        this.businessValidate(self.checkUrl)
      } else {
        this.getAvatar()
      }
    },
    methods: {
      businessValidate (validateUrl) {
        const self = this
        self.$Indicator.open()
        self.$api.auth.businessValidate(validateUrl).then(res => {
          self.$Indicator.close()
          if (res.code === 0) {
            this.getAvatar()
          } else if (res.code === 10) {
            self.$MessageBox({
              title: '账号错误',
              message: res.userMsg,
              showConfirmButton: true,
              confirmButtonText: '切换账号'
            }).then(action => {
              window.location.href = 'https://m.9ji.com/acount/login.aspx?url=' + encodeURIComponent(window.location.href)
            })
          } else {
            self.$MessageBox.alert(res.userMsg)
            this.nextEnable = false
          }
        }).always(function () {
          self.$Indicator.close()
        })
      },
      getAvatar () {
        const self = this
        self.$Indicator.open()
        self.$api.auth.getUserInfo().then(res => {
          self.$Indicator.close()
          let data = res.data
          if (res.code === 0) {
            self.userInfo.avatar = data.avatar ? data.avatar : 'https://img2.ch999img.com//images/usericon.png'
            // self.userInfo.name = data.name
            self.userInfo.name = '*' + data.name.slice(1)
            this.nextEnable = true
          } else {
            self.$Toast(res.userMsg ? res.userMsg : res.msg)
          }
        }).always(function () {
          self.$Indicator.close()
        })
      },
      next () {
        const self = this
        if (!self.nextEnable) {
          return
        }
        if (self.authInfo.order && self.authInfo.order) {
          if (self.agree) {
            self.showPassword = true
          } else {
            self.$Toast('请先同意《九机白条额度授权冻结协议》')
          }
        } else {
          self.$Toast('订单信息不完整')
        }
      },
      checkPayPwd (data) {
        // console.log('等待调用接口')
        const self = this
        self.$Indicator.open()
        self.$api.auth.checkPayPwd(data).then(res => {
          self.$Indicator.close()
          if (res.code === 0) {
            self.$api.auth.preAuth(self.authInfo.subId, self.authInfo.amount, this.checkUrl, this.apiType).then(res => {
              if (res.code === 0) {
                let data = res.data
                self.$router.push('/auth/detail/' + data.authorizeId + '?subId=' + this.authInfo.subId + '&fromQR=' + self.checkUrl)
              } else {
                self.$Toast(res.userMsg ? res.userMsg : res.msg)
              }
            })
          } else {
            self.$Toast(res.userMsg ? res.userMsg : res.msg)
          }
        }).always(function () {
          self.$Indicator.close()
        })
      },
      close () {
        const self = this
        self.showPassword = false
      },
      forgetPassword () {
        window.location.href = 'https://m.9ji.com/user/payPassword.aspx?url=' + encodeURIComponent(window.location.href)
      }
    }
  }
</script>
<style>
  .info-box{
    width: 100%;
    padding: 30px 0 60px;
  }
  .info{
    display: inline-block;
    margin: 0 30px;
    flex: 0 0 60px;
  }
  .fill-data {
    flex: auto!important;
  }
  .avatar{
    width: 60px;
    height: 60px;
    border-radius: 100%;
  }
  .checkbox{ padding-left: 10px;line-height: 30px; }
  .checkbox i{ width:20px; } 
  .agree{ color:#26a2ff; }
  .content{ 
    text-align: right; 
    display: inline-block;
    white-space: nowrap;  
    text-overflow:ellipsis; 
    overflow:hidden;
    flex: auto;
  }
</style>
